<template>
    <div id="report" class="content">
        <!-- 开始日期到结束日期  搜索按钮-->
        <div class="main_top">
            <el-date-picker v-model="start_time" type="date" placeholder="选择日期">
            </el-date-picker>
            -
            <el-date-picker v-model="end_time" type="date" placeholder="选择日期">
            </el-date-picker>

            <el-button type="primary" @click='searchData()'>搜索</el-button>
        </div>

        <!-- 自定义表格， 如果使用element组件没有办法实现点击字符跳转页面  -->
        <div class="electron-table">
            <table class="pageTable">
                <tr>
                    <th>标题/地址</th>
                    <th>舆情类型</th>
                    <th>舆情关键字</th>
                    <th>发现时间</th>
                    <th>帖子时间</th>
                </tr>
                <tr v-for="(item, key) in list" :key='key'>
                    <td>
                        <a :href="item.url" @click.prevent = "openShell($event, item.url)" >{{item.title}}</a>
                    </td>
                    <td>
                        <span v-if='item.type==1'>
                            正面舆情
                        </span>
                        <span class="red" v-if='item.type==-1'>
                            负面舆情
                        </span>
                        <span v-if='item.type ==0'>
                            中性舆情
                        </span>
                        <span v-if='item.type ==2'>
                            未知
                        </span>
                    </td>
                    <td>{{item.keywords}}</td>
                    <td>{{item.add_time | formTime}}</td>
                    <td>{{item.update_time | formTime}}</td>
                </tr>
            </table>
            <br>
            <br>
            <div class="page">
                <el-pagination      :current-page.sync="currentPage" @current-change="pageChange($event)" background layout="prev, pager, next" :total="total">
                </el-pagination>
            </div>
        </div>


    </div>
</template>

<script>
    import Storage from '../module/Storage';
    import Api from '../module/domain_name';
    import Md5 from '../module/Md5';
    export default {
        name: 'home',
        data() {
            return {
                start_time: '',
                end_time: '',
                page: 1,
                list: [],
                total: 10,
                currentPage:1
            }
        },
        filters: {
            // 定义一个过滤器对数据进行操作  value表示|前面的数据
            formTime(value) {
                // 因为接口返回的value是10位的，但是我们需要的时间戳是13位的 精确到毫秒
                let date = new Date(value * 1000);
                let y = date.getFullYear();
                let MM = date.getMonth() + 1;
                MM = MM < 10 ? ('0' + MM) : MM;
                let d = date.getDate();
                d = d < 10 ? ('0' + d) : d;
                let h = date.getHours();
                h = h < 10 ? ('0' + h) : h;
                let m = date.getMinutes();
                m = m < 10 ? ('0' + m) : m;
                let s = date.getSeconds();
                s = s < 10 ? ('0' + s) : s;
                return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
            }
        },
        methods: {
            openShell(e, url){
                console.log(e);
                // 调用shell  模块打开外部浏览器  
                // 使用this.$electron   其实这句话就相当于require('electron')
                this.$electron.shell.openExternal(url)
            },
            pageChange(e) {
                // 打印出第几页数字
                console.log(e);
                this.page = e;
                this.currentPage =e;
                this.getReportData();
            },
            searchData() {
                // 在按时间搜索是首先要把page改为1
                this.page = 1;
                this.currentPage=1;
                /*
                //获取时间戳，也可以使用new Date（this.start_time）  =》 s.getTime()
                this.start_time = Date.parse(this.start_time)/1000;
                this.end_time = Date.parse(this.end_time)/1000;
                */
                this.getReportData();
            },
            getReportData() {
                //   获取到用户ID  在本地存储localStorage
                const userinfo = Storage.get('userinfo');
                //获取时间戳，也可以使用new Date（this.start_time）  =》 s.getTime()
                var start = this.start_time ? Date.parse(this.start_time) / 1000 : '';
                var end = this.end_time ? Date.parse(this.end_time) / 1000 : '';
                // 签名的实现
                var sign = Md5.sign({
                    'a': 'logList', //改成对应的参数值
                    'uid': userinfo.id,
                    'salt': userinfo.salt //私钥  不要传入到URL中
                })
                // 根据接口来传递参数的，文档要求uid和sign要传递过去
                const api = Api.getReportApi;
                // 执行提交数据  axios
                this.$http.get(api, {
                        params: {
                            uid: userinfo.id,
                            sign: sign,
                            p: this.page,
                            start_time: start,
                            end_time: end,
                            type: 0
                        }
                    })
                    .then((response) => {
                        console.log(response);
                        this.list = response.data.result;
                        this.total = response.data.totalPage * 10;
                    })
                    .catch((error) => {
                        this.$message({
                            message: error,
                            type: 'warning'
                        });
                    });
            }
        },
        mounted() {
            //获取get传值
            console.log(this.$route.query);
            this.getReportData();
        },
    }
</script>

<style lang='scss'>





</style>